/* eslint-disable react/prop-types */
import { Button, Flex, Form } from "antd"
import { useCallback, useEffect } from "react"

import { queryMemberRemakeAdd } from "@/api/member"
import { IModalContent } from "@/api/member/types"
import { Toast } from "@/components/messages"
import { useApi } from "@/hooks"
import { useLocale } from "@/locales"

import { StyleContainter } from "../styles"
import { CustomTextArea } from "./CustomTextArea"

export const AccountRemarksModal: React.FC<IModalContent> = ({ handleCancel, filterInfo, userInfo }) => {
	const { formatMessage } = useLocale()

	const submit = useCallback(
		async (value: { remark: string }) => {
			const body = {
				remark: value.remark,
				userId: filterInfo.userId,
				userName: filterInfo.username,
				merchantId: filterInfo.merchantId
			}
			const [err] = await queryMemberRemakeAdd({ ...body })
			if (err) {
				Toast.error(err.msg)
			}
			handleCancel()
			form.resetFields()
		},
		[filterInfo]
	)
	const [form] = Form.useForm()

	const { loading } = useApi()

	useEffect(() => {
		if (userInfo) {
			form.setFieldsValue({
				remark: userInfo.remark || ""
			})
		}
	}, [userInfo])

	return (
		<StyleContainter>
			<Form
				style={{ width: "100%" }}
				form={form}
				onFinish={submit}
				initialValues={{
					remark: ""
				}}
			>
				<Flex vertical gap={10}>
					<CustomTextArea
						normalize={(value: string) => {
							return value.replace(" ", "")
						}}
						width="100%"
						placeholder={formatMessage({ id: "member.edit_user.account_status.please_enter" })}
						name="remark"
						label={formatMessage({ id: "member.edit_user.account_status.submit_notes" }) + ":"}
					/>

					<Flex justify="center" wrap="wrap" gap={10}>
						<Button
							key="back"
							onClick={() => {
								handleCancel()
								form.resetFields()
							}}
						>
							{formatMessage({ id: "member.table_info.cancel" })}
						</Button>
						<Button htmlType="submit" type="primary" loading={loading}>
							{formatMessage({ id: "common.sure" })}
						</Button>
					</Flex>
				</Flex>
			</Form>
		</StyleContainter>
	)
}
